<template>
  <div class="app-container">
    <!-- 条件查询 -->
    <el-form
      :inline="true"
      :model="teacherQuery"
      @keyup.enter.native="getTeaherList()"
      class="demo-form-inline"
    >
      <el-form-item>
        <el-input v-model="teacherQuery.name" placeholder="讲师姓名"></el-input>
      </el-form-item>
      <el-form-item @keyup.enter.native="getTeaherList()">
        <el-select
          v-model="teacherQuery.level"
          clearable
          placeholder="讲师头衔"
        >
          <el-option label="普通讲师" value="0"></el-option>
          <el-option label="高级讲师" value="1"></el-option>
          <el-option label="首席讲师" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item @keyup.enter.native="getTeaherList()">
        <el-date-picker
          type="datetime"
          placeholder="开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
          v-model="teacherQuery.begin"
        ></el-date-picker>
      </el-form-item>
      <el-form-item @keyup.enter.native="getTeaherList()">
        <el-date-picker
          type="datetime"
          placeholder="截止时间"
          v-model="teacherQuery.end"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getTeaherList()">查询</el-button>
        <el-button @click="clear()">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 将是表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="55">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="介绍" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.intro }}</span>
        </template>
      </el-table-column>
      <el-table-column label="资历" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.career }}
        </template>
      </el-table-column>
      <el-table-column label="头衔" width="110" align="center">
        <template slot-scope="scope">
          {{
            scope.row.level == 0
              ? "普通讲师"
              : scope.row.level == 1
              ? "高级讲师"
              : "首席讲师"
          }}
        </template>
      </el-table-column>
      <el-table-column label="头像" prop="avatar" align="center" width="130">
        <template slot-scope="{row}">
          <!-- <img :src="row.avatar" width="100px" height="100px" alt="头像"> -->
          <img src="../../../assets/defaultAvatar.png" width="100px" height="100px" v-real-img="row.avatar">
          </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort" align="center" width="60">
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" width="150" align="center">
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <router-link :to="`/teacher/edit/${scope.row.id}`">
            <el-button
            type="primary"
            icon="el-icon-edit"
            circle
          ></el-button>
          </router-link>
          
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDelete(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
  
  <script>
import teacher from "@/api/teacher";
// import defaultAvatar from '@/api/utils/defaultAvatar'

export default {
  data() {
    return {
      list: null,
      page: 1,
      limit: 10,
      total: 0,
      teacherQuery: {},
      listLoading: true,
    };
  },
  created() {
    this.getTeaherList();
  },
  methods: {
    //讲师分页
    getTeaherList() {
      this.listLoading = true;
      teacher.TeacherPageWithCondition(this.page, this.limit, this.teacherQuery)
        .then((response) => {
          // console.log(response.data);
          this.list = response.data.records;
          this.total = response.data.total;
          this.listLoading = false;
        })
        .catch((error) => {
          console.log(error);
        });
    },

    //删除讲师
    deleteTeacherById(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          teacher.deleteTeacher(id)
        .then((response) => {
          // console.log(response.data);
          if (response.state == 20000) {
            this.$message({
              showClose: true,
              message: "删除成功",
              type: "success",
            });
          }else{
            this.$message({
              showClose: true,
              message: "删除失败",
              type: "error",
            });
          }
          this.getTeaherList();
        })
        .catch((error) => {
          console.log(error);
        });
        })          
     
    },

    //重置表单
    clear() {
      this.teacherQuery = {};
      this.getTeaherList();
    },

    //每页显示条数改变
    handleSizeChange(val) {
      this.limit = val;
      this.getTeaherList();
    },

    //当前页码改变
    handleCurrentChange(val) {
      this.page = val;
      this.getTeaherList();
    },

    //编辑讲师
    handleEdit(index, row) {
      this.$router.push(`/teacher/save/${row.id}`)
      
    },

    handleDelete(index, row) {
      this.deleteTeacherById(row.id);
    },
  },
};
</script>
  